<template>
	<u-popup :show="show" @close="close" @open="open" mode="center" :round="12" @touchmove.stop.prevent=""
		:overlayStyle="{zIndex:10075}" :safeAreaInsetBottom="false">
		<view class="custom_poster">
			<canvas canvas-id="poster" id="poster" :style="{width: `${canvasWidth}px`, height: `${canvasHeight}px`}"
				class="poster"></canvas>
			<button @click="handleDownload" class="custom_poster_btn">下载海报</button>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import { ref, unref, onMounted } from 'vue';
	import { queryShareQRCode, updateActivityNum } from '@/config/index.api';

	const show = ref(false);
	const params = ref();
	const filePath = ref('');
	const canvasWidth = ref(0);
	const canvasHeight = ref(0);
	const emit = defineEmits(['success']);
	const posterImg = ref();
	const qrCodeImg = ref();

	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		canvasWidth.value = systemInfo.windowWidth * 0.65;
		canvasHeight.value = systemInfo.windowHeight * 0.65;
		// 海报图片
		// wx.downloadFile({
		// 	url: 'http://qianxueapplet.suoeryun.com/poster.jpg',
		// 	success: function (res) {
		// 		posterImg.value = res.tempFilePath;
		// 	}, fail: (err) => {
		// 		console.log(err);
		// 	}
		// })
		// // 二维码图片
		// wx.downloadFile({
		// 	url: 'http://qianxueapplet.suoeryun.com/qrCode.jpg',
		// 	success: function (res) {
		// 		qrCodeImg.value = res.tempFilePath;
		// 	}, fail: (err) => {
		// 		console.log(err);
		// 	}
		// })
	})
	async function handleShow(item) {
		show.value = true;
		params.value = item;
		//获取宽度
		const res = await queryShareQRCode({ page: item?.path, scene: item?.scene });
		console.log(res, 'ers');
		const context = uni.createCanvasContext('poster', this);
		const codeSize = unref(canvasWidth) * 0.25;
		context.drawImage('/static/images/poster.jpg', 0, 0, unref(canvasWidth), unref(canvasHeight));
		//#ifdef MP-WEIXIN
		if (__wxConfig.envVersion === 'release') {
			context.drawImage(res, unref(canvasWidth) * 0.69, unref(canvasHeight) * 0.8, codeSize, codeSize);
		} else if (__wxConfig.envVersion === 'develop') {
			context.drawImage('/static/images/qrCode.jpg', unref(canvasWidth) * 0.69, unref(canvasHeight) * 0.8, codeSize, codeSize);
		} else {
			context.drawImage('/static/images/qrCode.jpg', unref(canvasWidth) * 0.69, unref(canvasHeight) * 0.8, codeSize, codeSize);
		}
		// #endif
		context.restore()
		context.draw();
		uni.canvasToTempFilePath({
			canvasId: 'poster',
			success: function (res) {
				filePath.value = res.tempFilePath;
			},
			fail(err) {
				console.log(err);
			}
		}, this)
	}

	/**
	 * 下载海报
	 */
	async function handleDownload() {
		const item = unref(params);
		console.log(item, 'item');
		// await updateActivityNum({ activityId: item?.id, operationType: '2' });
		uni.saveImageToPhotosAlbum({
			filePath: unref(filePath),
			success: function () {
				uni.showToast({
					title: '海报已保存相册，快去朋友圈分享吧'
				});
				close();
				emit('success')
			},
			fail: function (err) {
				uni.showToast({
					title: '保存相册失败',
					icon: 'none'
				});
			}
		});
	}
	/**
	 * 打开
	 */
	function open() {
		console.log('open');
	}

	/**
	 * 关闭
	 */
	function close() {
		show.value = false;
		console.log('close');
	}

	defineExpose({
		handleShow,
	})
</script>

<style lang="scss">
	.custom_poster_btn {
		position: absolute;
		left: calc(50% - 98rpx);
		bottom: -92rpx;
		padding: 0;
		margin: 0;
		text-align: center;
		background-color: #FF943C;
		color: #ffffff;
		font-size: 32rpx;
		width: 196rpx;
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 322rpx;
		font-weight: 500;

		&::after {
			border: 0;
		}
	}
</style>